<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>logger</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/prism/1.14.0/themes/prism.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/prism/1.14.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet">
  
  <style>
    .highlight {
      padding: 9px 14px;
      margin-bottom: 14px;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
      border-radius: 4px;
    }
    
    .summary {
      font-weight: bold;
    }
    
    .method-get {
      color: blue;
    }
    
    .method-post {
      color: green;
    }

    li a:hover {
      cursor: pointer;
    }
    
    @media (min-width: 768px) {
      .modal-dialog {
        width: 700px;
        margin: 30px auto;
      }
    }
    
    .hover-pointer:hover {
      cursor: pointer;
    }

    .choose-db-modal li {
      font-size: 20px;
      font-weight: bold;
      margin: 10px 0;
      list-style: none;
    }
    .choose-db-modal li:hover {
      cursor: pointer;
      color: blue;
    }
      #logger button {
          outline: none;
      }
  </style>
</head>

<body class="container">

<div id="logger">
  <template v-if="db != ''">
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="javascript:">Logger</a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                {{current_project}}
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu choose-db">
                <template v-for="project of projects">
                  <li><a href="#" :data-db="project.db">{{project.name}}</a></li>
                </template>
              </ul>
            </li>

            <!--
            <li><a href="#" @click="_clear_log()">清空log表</a></li>
            <li><a href="#" @click="_clear_swagger_cache()">清空文档缓存</a></li>
            -->
            <li><a href="#" @click="showDocsModal()">使用说明</a></li>
            <!-- <li><a href="#" @click="showDocsModal()" style="color: red"><span class="glyphicon glyphicon-star"></span>收藏列表</a></li> -->
          </ul>
        </div>
        <div class="pull-right">
          <form class="form-inline" id="search-form">
            <div class="form-group">
              <div class="input-group" style="margin-top: 7px">
                <input class="form-control" type="text" name="keyword" :value="keyword" placeholder="搜索"/>
                <div class="input-group-addon">
                                  <span class="glyphicon glyphicon-search hover-pointer" aria-hidden="true"
                                        @click="submit()"></span>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </nav>
  </template>

  <template v-if="logs.length == 0 && db != ''">
    <div>暂时没有数据时</div>
  </template>
  
  <template v-for="log in logs">
    <div class="row highlight">
      <div class="row">
        <div class="col-md-12">
          
          <p class="hover-pointer" v-on:click="toggleDetail(log, $event)" style="margin: 0">
            <!--<span class="glyphicon glyphicon-star-empty"></span>-->
            {{ log.created_at }}:
            <code v-bind:class="{ 'method-get': log.method === 'GET', 'method-post': log.method === 'POST' }">
              {{ log.method }}
            </code>
            
            <template v-if="log.is_deprecated">
              <del><code v-on:click="copyValue(log.pathinfo)">{{ log.pathinfo }}</code></del>
            </template>
            <template v-if="!log.is_deprecated">
              <code v-on:click="copyValue(log.pathinfo)">{{ log.pathinfo }}</code>
            </template>
            
            <span class="summary pull-right"><span
                    style="color: blue;">{{ log.tag }}</span> {{ log.summary }}</span>
          </p>
          
          <div style="display: none; margin-top: 15px; " :id="'log-' + log.id" class="detail">
            <p>
              完整请求路径(点击复制):
              <code>
                <a class="hover-pointer" v-on:click="copyValue(log.full_url)">
                  {{ log.full_url }}
                </a>
              </code>
            </p>
            
            <p>文档地址: <a :href="log.doc_url" target="_blank">{{ log.doc_url }}</a></p>

            <p>
              <button class="btn btn-default btn-small" @click="showContent('请求头', log)">查看请求头</button>
              <button class="btn btn-default btn-small" @click="showContent('请求参数', log, 'json')">
                查看请求参数
              </button>
              <button class="btn btn-default btn-small" @click="showContent('响应内容', log, 'json')">
                查看响应内容
              </button>
              <button class="btn btn-default btn-small" @click="copyCurlCode(log)">复制curl代码</button>

                <template v-if="log.queries_count > 0">
                <button class="btn btn-default btn-small" @click="showContent('详情', log)">
                    <span style="color: #337ab7">{{ log.queries_count }}</span> 个查询共耗时
                    <span style="color: #337ab7">{{ log.accumulated_duration_str }}</span>
                </button>
              </template>
            </p>
          </div>
        
        </div>
      </div>
    </div>
  </template>
  
  <div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="modal-title"></h4>
        </div>
        
        <div class="modal-body">
          <input type="text" id="code-content" style="position: absolute; left: -3000px; z-index: 999999999">
          <pre><code id="modal-content" class="language-json"></code></pre>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      
      </div>
    </div>
  </div>
  
  <div class="modal fade" id="doc-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">使用说明</h4>
        </div>
        
        <div class="modal-body">
          <p>主要作用: 减少重现时间, 查看 app 端传递参数、api 响应内容</p>
          <p>1. 可点击 <code>GET</code>、<code>POST</code> 后面的路径复制, 主要作用是在 ide 可以使用 <kbd>shift shift 粘贴 回车</kbd>
            跳到对应的方法</p>
          <p>2. 可通过点击不同按钮查看 请求头、请求参数、响应 等内容</p>
          <p>3. 可点击按钮复制 curl 代码, 作用是可以在 postman 导入, 直接重现该请求</p>
          <p>curl 导入方法：点击 postman 左上角的 <code>import</code> 按钮, 点击 <code>Paste Raw Text</code> 按钮, 然后粘贴 curl
            代码, 点击 <code>import</code> 即可完成导入</p>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      
      </div>
    </div>
  </div>

  <div class="modal fade" id="choose-db" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">

        <!--
        <div class="modal-header">
          <h4 class="modal-title">选择一个项目</h4>
        </div>
        -->

        <div class="modal-body">
          <ul class="choose-db-modal choose-db">
            <template v-for="project of projects">
              <li :data-db="project.db">{{project.name}}</li>
            </template>
          </ul>
        </div>

      </div>
    </div>
  </div>
  
  <!-- {!! $list->render() !!} -->
  <ul id="page"></ul>
  
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.14.0/prism.min.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.14.0/components/prism-json.min.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.14.0/plugins/toolbar/prism-toolbar.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script>
  <script src="/static/js/bootstrap-paginator.min.js?v=1.1"></script>
</div>
</body>

<script type="text/javascript">
  const keyword = '<<<.keyword>>>';
  const page_no = '<<<.Page.PageNo>>>';
  const total_page = '<<<.Page.TotalPage>>>';
  let list = '<<<.list>>>';
  let db = '<<<.db>>>';
  let projects = [
    {
      name: "foodomo",
      db: "peper_test"
    },
    {
      name: "漫居民宿",
      db: "manju"
    },
    {
      name: "vem",
      db: "flowerws_dev"
    }
  ];
</script>
<script src="/static/js/script.js?v2018061102"></script>

</html>